HTML 标签

HTML

HTML:超文本编辑语言(标签语言)

浏览器顺序渲染,从上到下,从左到右

是树型的

html格式
标签的属性是关键

meta标签 可提供有关页面的元信息

1
2
3
4
5
6
7
8
<meta charset="utf-8">
<meta name ="keywords" content="关键词"> <!--关键词用于搜索-->
<meta name="description" content="描述"> <!--网站的介绍-->
<meta http-equiv="retresh" content="3";http://www.baidu.com> <!--3秒跳转-->
<link rel="icon" herf ="https://www."> <!--标签的图标-->

1
2
3
4
5
6
7
8
9
10
11
<body>
<h1>
<p> <!--段落-->
<b>
<strike> <!--中间的横线-->
<em> <!--斜体-->
<sub><!--下角标-->
<sup><!--上角标-->
<br> <!--换行-->
<hr><!--水平线-->
<body>

图片标签

1
<img src="" alt="">

a标签

1
id = "" id是唯一的

标签分类:

  • 块级标签—独占一行
    • h1
    • p
    • div
  • 内联标签—根据内容而定
    • sub
    • sup
    • b
    • span

列表标签

  • 无序列表 unorder list

    1
    2
    3
    4
    5
    <ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    </ul>
  • 有序列表ol

    1
    2
    3
    4
    5
    <ol>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    </ol>

定义列表dl

1
2
3
4
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>

table

1
2
3
4
5
<tr>
<td rowspan="2" align="center"></td>
<td ></td>
<td ></td>
</tr>

制作的菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style>
table{
height: 300px;
width: 500px;
border-color: #E788F7;
}
img{
width: 100px;
}
</style>
</head>
<body>
<table border="2px" cellpadding="0px" cellspacing="0px" align="center">
<tr> <!--第一列是标题内容-->
<td colspan="3" align="center">星期一菜谱</td>
</tr>
<tr>
<td rowspan="2" align="center">素菜</td>
<td >青草茄子</td>
<td >花椒扁豆</td>
</tr>
<tr>
<td >小葱豆腐</td>
<td >炒白菜</td>
</tr>
<tr>
<td rowspan="2" align="center" >荤菜</td>
<td >油焖大虾</td>
<td >海参鱼翅</td>
</tr>
<tr>
<td >红烧肉
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494927422953&di=de12523759b4761d104db22ff0e23ccf&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F81280492%2Fr0364noa4xc_ori_3.jpg">
</td>
<td >烤全羊</td>
</tr>
</table>
</body>
</html>

制作的课程表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>classtable</title>
<style>
table{
border-color: blue;
}
</style>
</head>
<body>
<table border="1" cellspacing="1" align="center" >
<tr>
<td>项目</td>
<td colspan="5" align="center">上课</td>
<td colspan="2" align="center">休息</td>
</tr>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4" align="center">休息</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr>
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机</td>
</tr>
<tr>
<td rowspan="2" align="center">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2" align="center">休息</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>

© 2018 Peter's Blog Center All Rights Reserved.
Theme by hiero